<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:jsf="http://xmlns.jcp.org/jsf" template="/WEB-INF/template.xhtml">

	<ui:define name="title">
        Search By Id
    </ui:define>

	<ui:define name="description">
        Let you search using the Id
    </ui:define>

	<ui:define name="implementation">

		<h:form>
			<p:growl id="growl" life="2000" />


			<h:panelGrid columns="2">
				<p:inputText value="#{searchManagedBean.id}" placeholder="Enter Id" />
				<p:commandButton value="Search" id="ajax" update="growl,:details"
					action="#{searchManagedBean.search}" style="margin-right:20px;"
					styleClass="ui-priority-primary" />
			</h:panelGrid>


		</h:form>

	</ui:define>

	<ui:define name="source">
		<p:tabView id="details">
			<p:tab title="Basic Details">
				<p:panelGrid columns="2" layout="grid"
					rendered="#{not empty(searchManagedBean.profile)}">
					<f:facet name="header">
						<p:graphicImage pt:value="#{searchManagedBean.profile.url}"
							width="200px;"></p:graphicImage>
					</f:facet>
					<h:outputLabel value="First Name"></h:outputLabel>
					<h:outputLabel value="#{searchManagedBean.profile.firstname}"></h:outputLabel>
					<p:outputLabel value="last Name"></p:outputLabel>
					<p:outputLabel value="#{searchManagedBean.profile.lastname}"></p:outputLabel>
					<p:outputLabel value="DOB"></p:outputLabel>
					<p:outputLabel value="#{searchManagedBean.profile.dob}"></p:outputLabel>
					<p:outputLabel value="JOB"></p:outputLabel>
					<p:outputLabel value="#{searchManagedBean.profile.occupation}"></p:outputLabel>
				</p:panelGrid>
			</p:tab>

			<p:tab title="Advanced Details">
				<p:media value="#{searchManagedBean.profile.videoUrl}" width="420"
					height="315" player="flash" />
				<!-- <embed width="420" height="315" jsf:src="#{searchManagedBean.profile.videoUrl}"/> -->
				<!--  http://www.youtube.com/v/XGSy3_Czz8k ,http://youtube.com/v/sTqUBY_JSn4">
				<input id="lastname" type="text"  placeholder="Enter lastname" jsf:value="#{searchManagedBean.profile.lastname}" />-->
			</p:tab>

			<p:tab title="Documentation" titleStyleClass="tab-doc docslide-105" />
		</p:tabView>

	</ui:define>

</ui:composition>
